<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import { RouterLink, RouterView } from 'vue-router'
import arc from '@/assets/images/arc.png'

// 自适应rem B
const flag = ref(false)
// 防止频繁触发
const onWindowResize = () => {
  if (!flag.value) {
    flag.value = true
    setTimeout(() => {
      initFontSize()
      flag.value = false
    }, 300)
  }
}

const initFontSize = () => {
  const view_width = document.getElementsByTagName('html')[0].getBoundingClientRect().width;
  const _html = document.getElementsByTagName('html')[0];
  _html.style.fontSize = 100 * (view_width / 1920) + 'px'
}

onMounted(() => {
  initFontSize()
  window.addEventListener('resize', onWindowResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', onWindowResize)
})

// 自适应rem E

</script>

<template>
  <header>
    <div class="hsq-title">
      <span>汉石桥综合展示</span>
    </div>
    <div class="arc">
      <img style="width: 100%;height: 100%;" :src="arc" alt="">
    </div>

    <nav>
      <RouterLink active-class="active-link" class="hsq-nav" to="/basicInfor"> <span>基本信息</span> </RouterLink>
      <RouterLink active-class="active-link" class="hsq-nav" to="/resource"> <span>资源管护</span></RouterLink>
      <RouterLink active-class="active-link" class="hsq-nav" to="/living"> <span>生物资源</span> </RouterLink>
      <div class="hsq-nav"><span>生态环境</span></div>
      <div class="hsq-nav"><span>生态安全</span></div>
    </nav>

  </header>
  <main>
    <RouterView />
  </main>
</template>

<style scoped>
header {
  width: 100vw;
  height: 1.6rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  background: linear-gradient(to bottom, rgba(0, 130, 122, 0.7) 10%, rgba(0, 130, 122, 0.5) 30%, rgba(0, 130, 122, 0.2) 60%, rgba(0, 21, 19, 0) 100%);
  overflow: hidden;
}

.hsq-title {
  width: 100%;
  text-align: center;
  font-family: 'Fite';
  font-size: .4rem;
  line-height: 0.8rem;
}

.arc {
  width: 15rem;
  height: 0.3rem;
  position: absolute;
  top: 0.55rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

nav {
  width: 15rem;
  height: 0.4rem;
  padding: 0 .2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

.hsq-nav {
  display: block;
  width: 1.5rem;
  height: 0.4rem;
  position: relative;
  text-align: center;
  line-height: 0.4rem;
  font-family: 'Fite';
  font-size: .28rem;
  background: linear-gradient(to bottom, rgba(5, 77, 72, 1) 30%, rgba(0, 133, 124, 0.6) 100%);
  border: 2px solid transparent;
  border-image: linear-gradient(to top, rgba(46, 205, 255, .8), rgba(46, 255, 242, 0)) 1;
  transform: skew(-20deg);
  overflow: hidden;
  opacity: .7;
  cursor: pointer;
  margin-right: 16px;
}

.hsq-nav span {
  display: inline-block;
  transform: skew(20deg);
}

main {
  width: 100vw;
  height: 100vh;
  background-color: #000;
  overflow: hidden;
}

main>* {
  width: 100%;
  height: 100% !important;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}

.active-link {
  opacity: 1 !important;
}
</style>
